<template>
  <view class="body">
    <view class="card-pepole">
      <image src="../../static/mine/头像.png" class="image"></image>
      <view class="phone">
        {{phone?phone.slice(0,4)+'****'+phone.slice(7,11):'暂未登录'}}
      </view>
    </view>
    <view style="background: rgba(255, 255, 255, 1);">
      <view class="play-icon" >
        <view class="icon-box"  v-for="(item,index) in icondata" :key="item.id"><image :src="item.icon" class="icon" @click="()=>comeTo(item.url)"></image><view>{{item.name}}</view></view>
        <!-- <view class="icon-box" @click=""><image src="../../static/mine/card.png" class="icon"></image><view>权益激活</view></view> -->
      </view>
    </view>
    <view class="comeback">
        <image src="../../static/mine/loginback.png" class="icon"></image>
        <view class="back_title" @click="loginBack">退出登录</view>
    </view>
  </view>
</template>

<script setup>
  import { onShow } from "@dcloudio/uni-app";
import {
    signOut
  } from "../../request/login.js"
  import {
    onMounted,
    ref
  } from 'vue';
  const icondata = ref([])
  const phone = ref(null)
  onMounted(()=>{
      icondata.value = [
        {
          id:1,
          icon:"../../static/mine/mycard.png",
          name:"我的卡包",
          url:"/pages/mine/cardbord"
        },
        {
          id:2,
          icon:"../../static/mine/card.png",
          name:"权益激活",
          url:"/pages/mine/activation"
        }
      ]
  })
   onShow(()=>{
     phone.value = uni.getStorageSync("Phone")
   })
  function loginBack(){
    uni.reLaunch({
      url: "/pages/login/login",
      success() {
        uni.clearStorageSync()
      }
    })
    // window.history.replaceState(null,null,'/')
    signOut().then(res => {
      if (res.code === 200) {
        // uni.showToast({
        //     title: res.message,
        //     icon:"none"
        //   })
      } else {
        // uni.showToast({
        //   title: res.message,
        //   icon:"none"
        // })
      }

    }).catch(err => {
      uni.showToast({
        title: err.message
      })
    })
  }
  function comeTo(url){
    uni.navigateTo({
      url:url
    })
  }
</script>




<style scoped>
  .back_title{
    margin-left: 10rpx;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0px;
    /* line-height: 40rpx; */
    color: rgba(0, 0, 0, 1);
    display: felx;
    justify-content: center;
    align-items: center;
  }
  .comeback{
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    width: 750rpx;
    height: 124rpx;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    padding:50rpx;
  }
  .icon-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 40rpx;
    color: rgba(0, 0, 0, 1);
  }
  .icon{
     width:70rpx;
     height:70rpx;

  }
  .play-icon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 将容器分为4列 */
    /* 可选：设置每个项之间的间距 */
    width: 95%;
    height: 154rpx;
    opacity: 1;
    margin: 0 auto;
  }

  .phone {
    padding: 30rpx;
    font-size: 36rpx;
    font-weight: 500;
    letter-spacing: 0rpx;
    line-height: 52rpx;
    color: rgba(255, 255, 255, 1);
  }

  .image {
    width: 120rpx;
    height: 120rpx;
  }

  .body {
    min-height: 93vh;
    background: rgba(247, 247, 247, 1);
  }

  .card-pepole {
    width: 750rpx;
    height: 284rpx;
    opacity: 1;
    background: linear-gradient(180deg, rgba(69, 193, 255, 1) 0%, rgba(2, 139, 255, 1) 37.74%, rgba(0, 121, 252, 1) 72.38%, rgba(0, 123, 252, 1) 100%);
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding: 40rpx;
  }
</style>
